<template>
    <div class="singerList">
        <div class="singerListContent" v-loading.fullscreen.lock="$store.state.fullscreenLoading">
            <div class="singerListItem"
                 v-for="(item,index) of singerList"
                 :key="index"
                 @click="singerDetail(item.id)"
            >
                <div class="img">
                    <img :src="item.picUrl" alt="">
                </div>
                <div class="msg">
                    <p class="name">{{item.name}}</p>
                    <p class="fansNum">粉丝量：{{item.fansCount}}</p>
                </div>
            </div>
        </div>
        <keep-alive>
            <router-view></router-view>
        </keep-alive>
    </div>
</template>

<script>
  import { singerList } from "../api/http"
  import { mapMutations } from "vuex"
  export default {
    name: "singers",
    components:{},
    data(){
      return{
        singerList:[]
      }
    },
    created(){
      this._singerList()
    },
    methods:{
      ...mapMutations(["setLoading"]),
        async _singerList(){
          this.setLoading(true)
          const res = await singerList()
          this.singerList = res.data.artists
          this.setLoading(false)
        },
        singerDetail(id){
          this.$router.push({
            name:"singer_detail",
            params:{
              singer_id:id
            }
          })
        }
    }
  };
</script>

<style scoped lang="scss">
    @import "../common/variable";
    .singerListContent{
        display: flex;
        flex-wrap: wrap;
        justify-content: space-around;
        .singerListItem{
            width: 30%;
            height: 150rem;


            .img{
                width: 100%;
                height: 110rem;
                img{
                    width: 100%;
                    height: 100%;
                    border-radius: 50%;
                    object-fit: cover;
                }
            }
            .msg{
                p{
                    font-size: $header-fontsize-S;
                    margin: 0;
                    color: #909090;
                }
            }
        }
    }

</style>